<template>
  <div>
    <div class="top" @click="openModel">
      <div class="user_left">
        <van-image
          round
          fit="cover"
          width=".7rem"
          height=".7rem"
          :src="avatar"
        />
      </div>
      <div class="user_right">
        <h3>{{ nickname }}</h3>
        <span>&gt;</span>
      </div>
    </div>
    <div>
      <van-grid :column-num="3" square>
        <van-grid-item icon="label-o" text="我的订单" />
        <van-grid-item icon="bill-o" text="优惠卷" />
        <van-grid-item icon="goods-collect-o" text="礼品卡" />
        <van-grid-item icon="location-o" text="我的收藏" />
        <van-grid-item icon="flag-o" text="我的足迹" />
        <van-grid-item icon="user-o" text="会员福利" />
        <van-grid-item icon="aim" text="地址管理" />
        <van-grid-item icon="warn-o" text="账号安全" />
        <van-grid-item icon="service-o" text="联系客服" />
        <van-grid-item icon="question-o" text="帮助中心" />
        <van-grid-item icon="smile-comment-o" text="意见反馈" />
      </van-grid>
    </div>
    <!-- 弹出层 -->
    <van-popup v-model="isShowlogin">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >登录</van-button
          >
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import { GetUserData } from "@/request/api";
export default {
  data() {
    return {
      avatar: require("../assets/ccd2d575fdf705682f0c25e1a07921a4.jpeg"),
      isShowlogin: false,
      username: "",
      password: "",
      nickname: "点击登录",
    };
  },
  created() {
    // 获取存储中的userInfo的数据，渲染
    let userInfo = localStorage.getItem("userInfo");
    if (userInfo) {
      userInfo = JSON.parse(userInfo);
      this.avatar = userInfo.avatar;
      this.nickname = userInfo.nickname;
    }
  },
  methods: {
    openModel() {
      // 判断用户是不是已经登录，尝试获取token，如果获取到，就直接return
      // 获取不到token，就表示没有登录，应该执行this.isShowModel = true
      let token = localStorage.getItem("token");
      if (token) {
        return;
      } else {
        this.isShowlogin = true;
      }
    },
    onSubmit(values) {
      console.log("submit", values);
      let username = values["用户名"];
      let pwd = values["密码"];
      // 发送登录请求
      GetUserData({ username, pwd }).then((res) => {
        console.log(res);
        if (res.errno == "0") {
          // 1、提示登录成功
          this.$toast.success("登录成功");
          // 2、保存token值，和userInfo用户信息到本地存储
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("userInfo", JSON.stringify(res.data.userInfo));
          setTimeout(() => {
            // 3、关闭模态框
            this.isShowlogin = false;
            // 4、修改用户头像和登录昵称
            this.avatar = res.data.userInfo.avatar;
            this.nickname = res.data.userInfo.nickname;
          }, 1000);
        } else {
          console.log(res.errmsg);
        }
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
.top {
  padding: 30px 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  .user_right {
    font-size: 0.16rem;
    margin-left: 0.1rem;
    flex: 1;
    display: flex;
    justify-content: space-between;
  }
}
.van-popup {
  padding-top: 0.1rem;
  width: 90%;
  min-height: 1.8rem;
}
</style>